<template>
  <div>
    <el-card>
      <el-button
        @click="drawer = true"
        type="primary"
        style="margin-left: 16px"
      >
        点我打开
      </el-button>
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="Worth" label="身价(单位:亿)">
          </el-table-column>

          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="address" label="地址" width="180">
          </el-table-column>
          <el-table-column prop="sex" label="性别"> </el-table-column>
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
        </el-table>
      </template>
    </el-card>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <h3 class="title">只针对身价项</h3>
      <div class="btn-box">
        <el-button class="checkeout" @click="gotoMap">map</el-button>
        <el-button :class="{ checke: checkeout == 'forEarch' ? true : false }"
          >forEarch</el-button
        >
        <el-button :class="{ checkeout: checkeout == 'every' ? true : false }"
          >every</el-button
        >
        <el-button :class="{ checkeout: checkeout == 'filter' ? true : false }"
          >filter</el-button
        >
        <el-button :class="{ checkeout: checkeout == 'some' ? true : false }"
          >some</el-button
        >
        <el-button :class="{ checkeout: checkeout == 'find' ? true : false }"
          >find</el-button
        >
      </div>
      <el-divider></el-divider>
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item class="conditionInput" label="条件:">
            <el-input
              :type="state !== 0 ? 'number' : 'string'"
              v-model.number="form.input"
              placeholder="请输入条件..."
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="yesOrNo">
          <div class="btn-right">
            <el-button type="primary">清除</el-button>
            <el-button type="primary">确认</el-button>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </el-drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      drawer: false, //边框显示与否
      state: 0, //当前的选项状态
      form: {
        input: '' //条件
      },
      checkeout: '' //选中的状态
    }
  },

  created() {
    if (this.tableData.length == 0) {
      this.$store.dispatch('gitList')
    }
    console.log(this.tableData)
  },
  computed: {
    ...mapState(['tableData'])
  },
  methods: {
    gotoMap() {
      console.log(this.form.input)
    }
  }
}
</script>



<style>
.conditionInput {
  margin: 5px;
}
.title {
  text-align: center;
}
.btn-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.btn-box .el-button {
  margin: 5px;
}
.yesOrNo {
  position: relative;
  display: block;
  height: 40px;
  margin-top: 20px;
}
.btn-right {
  position: absolute;
  right: 5px;
}
.checke {
  background: #409eff !important;
  color: #fff !important;
}
</style>